<template>
  <div class="personal-page collection">
    <div class="pp-title">{{name}}</div>
    <div class="pp-content">
      <div>
        <el-select
          v-model="catid"
          placeholder="我的课程"
          @change="handleChange"
        >
          <el-option
            v-for="item in category"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="xyd-el-table2">
        <el-table
          ref="multipleTable"
          :data="data"
          :border="false"
          tooltip-effect="dark"
          style="width: 100%"
          v-loading.body="loading"
          >
          <el-table-column
            prop="create_time"
            label="上传时间"
            width="200">
          </el-table-column>
          <el-table-column
            prop="resource_name"
            label="课程名称"
            width="200">
          </el-table-column>
          <el-table-column
            prop="category"
            label="资源类型"
            width="120">
          </el-table-column>
          <el-table-column
            prop="price"
            label="语点"
            width="120">
            <template scope="scope">
              <span>{{scope.row.price}}语点</span>
              <!-- <span>{{scope.row.yd_type == 0 ? '普通语点' : scope.row.yd_type == 1 ? '钻石语点' : '语点'}}</span> -->
            </template>
          </el-table-column>
          <el-table-column
            prop="option"
            label="操作"
            show-overflow-tooltip>
            <template scope="scope">
              <span class="option">
                <input class="url" type="text" :id="'download_url_' + scope.row.id" :value="appOrigin + '#/resource/download/' + scope.row.id"/>
                <a href="javascript:;" title="收藏"  @click="handleCollect(scope.row)">
                  <i :class="scope.row.collected ? 'xyd-collection_a animated bounce' : 'xyd-collection2'"></i>
                </a>
                <a href="javascript:;" title="下载" @click="handleDownload(scope.row)">
                  <i class="xyd-download2" ></i>
                </a>
                <a href="javascript:;" title="预览" @click="handlePreview(scope.row)">
                  <i class="xyd-preview2" ></i>
                </a>
                <a href="javascript:;" title="分享" @click="handleShare(scope.row)">
                  <i class="xyd-share2" ></i>
                </a>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          :page-size="offset"
          layout="prev, pager, next"
          :total="total"
          @current-change="handlePageChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>


<script>
  import { isCollected, getCollection } from 'api/common'
  import { NavBar } from 'views/layout'
  export default {
    name: 'Listen',
    components: {
      NavBar
    },
    data() {
      return {
        appOrigin: process.env.APP_ORIGIN,
        name: this.$route.name,
        loading: false,
        category: [],
        catid: '',
        data: [],
        offset: 10,
        page: 1,
        total: 0
      }
    },
    created() {
      this.$store.dispatch('GetTops')
      .then(res => {
        this.category = res
      })
      .catch(err => console.log(err))
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.loading = true
        getCollection({
          catid: this.catid,
          offset: this.offset,
          page: this.page
        })
        .then(res => {
          this.loading = false
          this.data = res.collection
          this.total = res.page.last_page * this.offset
        })
        .catch(err => {
          console.log(err)
          this.loading = false
        })
      },
      handleCollect(item) {
        const { id, category, title, price, yd_type } = item
        if (!this.$store.state.user.uid) {
          this.$message({
            message: '需要登录',
            type: 'warning'
          })
          return false
        }
        item.collected = true
        collect({
          rsid: id,
          cat: category,
          rsname: title,
          price
        })
        .then(res => console.log(res))
        .catch(err => {
          item.collected = false
          this.$message({
            message: err.msg,
            type: 'error'
          })
        })
      },
      handleDownload(item) {
        this.$router.push('/resource/download/' + item.id)
      },
      handlePreview(item) {
        this.$router.push('/resource/preview/' + item.id + (this.isListen ? '?type=listen' : ''))
      },
      handleShare(item) {
        const did = document.getElementById('download_url_' + item.id)
        did.select()
        document.execCommand('copy', true)
        this.$message({
          message: '资源链接已成功复制到剪贴板，快去分享吧~',
          type: 'success'
        })
      },
      handleChange() {
        this.page = 1
        this.fetchData()
      },
      // 分页
      handlePageChange(page) {
        this.page = page
        this.fetchData()
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.personal-page.collection{
  .pp-title{}
  .pp-content{
    padding: 20px 40px;
    .xyd-el-table2{
      .option{
        >a{
          padding: 0 10px;
        }
      }
    }
  }
}
</style>